<template>
    <div class="goods-item">

        <div class="cont"  @click="itemClick()">
          <div class="pickgradient">
             <img  v-lazy="product.cover_url" alt="">
          </div>
          <div class="goods-info">
            <p>{{product.title}}</p>
            <div class="info">
               <!-- <span class="price"><small>￥</small>{{product.price.toFixed(2)}}</span>-->
               <span class="price">
                   <van-icon name="clock-o" />
                   {{product.updated_at.substr(0,10)}}</span>
                <span class="collect" ><van-icon size="12" name="cross" />{{product.stock}}</span>
            </div>

        </div>
    </div>
    </div>
</template>

<script>

    export default {
        name: "GoodsListItem",

        props: {
            product: Object,
            default(){
                return {}
            }
        },

        data(){
            return {

            }
        },

        methods:{
            itemClick(){
                this.$router.push({path:'/detail', query:{id:this.product.id}});
            }
        }

    }
</script>

<style scoped lang="less">

    .goods-item {
        border-radius: 5px;
        justify-content: space-around;
        align-items: center;
        width: calc(50% - 10px);
        box-sizing: border-box;
        background: #151413;
        border: 0.5rem solid #151413;
        float: left;
        position: relative;
        vertical-align: top;
        text-align: center;
        .cont {
            display: block;
            text-align: center;
          position: relative;

        img {
            display: block;
            height: 190px;
            margin: 0.5rem auto;
            width: 90%;
            max-width: 90%;
            position:relative;

        }
            p {
              font-family: 'Dream Han Sans SC';
              font-style: normal;
              font-weight: 398;
              font-size: 14px;
              line-height: 20px;
              color: #FFFFFF;
                text-align: left;
        /*        word-break: break-all;*/
                white-space:normal !important;
                word-wrap: break-word !important;
              margin: 0 !important;
            }

            .info {
                display: flex;
                justify-content: space-between;
                .price {
                    color: #FFFFFF;
                  font-family: 'Dream Han Sans SC';
                  font-style: normal;
                  font-weight: 398;
                  font-size: 12px;
                  line-height: 30px;

                }

                .collect {
                    color: #EFEFEF;
                  font-family: 'Dream Han Sans SC';
                  font-style: normal;
                  font-weight: 398;
                  font-size: 16px;
                  line-height: 30px;
                  /* identical to box height, or 143% */
                  text-align: right;
                  color: #FB8417;


                }


            }
        }


    }
    .pickgradient {
      position:relative;
    }
    .pickgradient:after {
      content:'';
      position:absolute;
      left:0; top:0;
      width:100%; height:100%;
      display:inline-block;
      background: linear-gradient(to bottom, rgb(255 255 255 / 0%) 50%, rgb(0 0 0 / 60%) 80%); /* W3C */

    }
    .goods-info{
    position: absolute;
  bottom: -10px;
    left: 0.5rem;
      width: 90%;
  }
</style>
